<template>
    <div id="main4" :style="{ width: widthProp, height: heightProp }" style="margin-top: 20px;"></div>
</template>
  
<script>
export default {
    props: {
        widthProp: {
            type: String,
            default: "50%",
        },
        heightProp: {
            type: String,
            default: "50%",
        },
        data: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    mounted() {
        this.drawChart2();
    },
    methods: {
        drawChart2() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main2对应
            let myChart = this.$echarts.init(document.getElementById("main4"));

            var option = {
                title: {
                    text: 'ESG相关数据对比'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['环境', '社会', '公司治理', 'GRI', 'SDG', 'SASB']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '环境',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210, 192]
                    },
                    {
                        name: '社会',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310, 92]
                    },
                    {
                        name: '公司治理',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410, , 112]
                    },
                    {
                        name: 'GRI',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390, 330, 320, 99]
                    },
                    {
                        name: 'SDG',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 976]
                    },
                    {
                        name: 'SASB',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 501, 634, 301, 334, 390, 330]
                    },
                ]
            };

            myChart.setOption(option);
        },
    },
};
</script>
  
<style></style>